<template>
  <div class="outBorder">
    <div class="flex flex_vcenter topBox">
      <img src="../assets/images/icon_zxzf_sanjiaox.png" alt="">
      <span>选择付款方式</span>
    </div>
    <mu-list>
      <mu-list-item title="微信钱包支付" describeText="推荐微信用户使用">
        <img :src="wxIcon" alt="" slot="leftAvatar"/>
        <img :src="checked" class="rightIcon" alt="" slot="right"/>
      </mu-list-item>
    </mu-list>
  </div>
</template>

<script>
  import wxIcon from '../assets/images/icon_zxzf_wx.png'
  import checked from '../assets/images/icon_zjzf_checkmark.png'
  export default {
    data () {
      return {
        wxIcon: wxIcon,
        checked: checked
      }
    },
    mounted () {

    },
    methods: {}
  }
</script>

<style scoped lang="less">
  @import "../common/css/flex.css";
  @import "../common/css/vars";
  .outBorder{
    border-top:1px solid @color-border;
    border-bottom:1px solid @color-border;
    background-color: white;
  }
  .topBox{
    padding:10px 20px;
    border-bottom:1px solid @color-border;
    img{
      height:14px;
      width:14px;
      margin-right:10px;
    }
  }
  .rightIcon{
    width:20px;
    height:20px;
  }
</style>
